<html>
    <head>
        <title>自定义组件的v-model</title>
    </head>
    <body>
        <script>
            //  自定义组件的v-model
                        /*
                            一个组件上的 v-model "默认会利用名为 value 的属性" 和 "名为 input的事件"，
                            但是，像 单选框、复选框等类型的输入控件可能会将 value 属性用于不同的目的。
                            model选项可以用来避免这样的冲突：
                        */
                              Vue.component('base-checkbox',{
                                    // model选项，用来声明自定义组件的 v-model 指令应该如何工作
                                    model:{  
                                        prop:'checked',   // 双向绑定时,传入的值绑定给 checked属性
                                        event:'change'    // 双向绑定时,触发的事件是 change事件，并把最新的checked值传递给父组件的v-model绑定的变量上。
                                    },
                                    props:{
                                        checked:Boolean
                                    },
                                    template:`
                                        <input
                                            type="checkbox"
                                            v-bind:checked="checked"
                                            v-on:change="$emit('change',$event.target.checked)"
                                            >
                                    `
                              })

                              // 现在，在这个组件上使用　v-model ：
                                    /*
                                        <base-checkbox v-model="lovingVue" > </base-checkbox>

                                        这里的 lovingVue 的值将会传入这个名为 checked 的 prop 。
                                        同时当 <base-checkbox>触发一个 change 事件并附带一个新的值得时候，这个lovingVue变量的值将被更新。
                                    */

                              // 注意： 你仍然需要在组件的 props 选项里声明 checked 这个 prop

        </script>
    </body>
</html>